0장. 한눈에 보기

출처: 『혼자 공부하는 바이브 코딩 with 클로드 코드』(조태호) | 예제 코드: github.com/taehojo/vibecoding

코드는 분위기만 — npm, Node.js, .py 같은 말은 몰라도 됩니다. 표의 '비유'와 '위험'만 봐도 충분해요.

이 책 큰 그림 5가지만

1. 바이브 코딩은 "코드를 직접 안 쓴다"는 뜻이다. AI에게 말로 시키고, 결과를 보고, 다시 말로 고친다.
2. 그래서 말을 잘하는 것이 곧 실력이다. 모호하게 시키면 엉뚱한 게 나오고, 구체적으로 시키면 원하는 게 나온다.
3. 한 번에 다 시키지 않는다. 큰 일은 작은 단계로 쪼개서 하나씩 시키고 확인한다.
4. 도구는 점점 깊어진다. 처음엔 웹 채팅으로, 나중엔 내 컴퓨터에 깔아서 파일까지 직접 만들게 한다.
5. AI에게 "우리 프로젝트 규칙"을 적은 메모를 쥐여 주면, 매번 설명 안 해도 알아서 따른다.

이 0장은 책 본문에 나오는 어려운 말을 미리 풀어 둔 곳이다.

뒤 장에서 막히면 여기로 돌아오면 된다.

용어집(0절)과 개념 척추가 전부다. 천천히 읽으면 된다.

0. 먼저 알아둘 말 (용어집)

이 절은 책 전체 용어의 단일 출처다.

본문 어디서 어려운 말이 나와도, 그 뜻은 전부 여기 적혀 있다.

각 용어는 [한 문장 뜻 + 일상비유 + 한 줄 예] 3종으로 적었다.

바이브 코딩(vibe coding)

한 문장 뜻 — 코드를 직접 타이핑하지 않고, AI와 대화하며 프로그램을 만드는 방식.

일상비유 — 요리를 못 하는 사람이 요리사에게 "시원한 파스타 해 줘"라고 말하면 알아서 만들어 주는 것. 맛보고 "좀 더 짜게"라고 고치면 된다.

한 줄 예 —

# 코드를 적는 게 아니라, AI에게 말로 시킨다
ai.ask("손글씨 숫자를 인식하는 프로그램 만들어 줘")

LLM(엘엘엠, 대규모 언어 모델)

한 문장 뜻 — 엄청난 양의 글과 코드를 미리 읽어, 사람 말을 알아듣고 코드를 만들어 내는 AI.

일상비유 — 세상 책을 거의 다 읽은 도서관 사서. 무엇을 물어도 읽은 걸 바탕으로 대답한다.

한 줄 예 —

# 클로드, ChatGPT 같은 게 전부 LLM이다
answer = llm.generate("파이썬으로 계산기 만들어 줘")

프롬프트(prompt)

한 문장 뜻 — AI에게 건네는 요청이나 지시 한 덩어리. 말로 적은 명령서다.

일상비유 — 택시 기사에게 대는 행선지. "좋은 데로"가 아니라 "서울역으로"라고 해야 제대로 간다.

한 줄 예 —

# 이 따옴표 안 문장 전체가 프롬프트
prompt = "밝고 깔끔한 시작 페이지를 만들어 줘"

아티팩트(Artifacts)

한 문장 뜻 — 클로드가 코드를 만들고 그 결과를 바로 미리 보여 주는 작업 공간(대화창 옆 패널).

일상비유 — 옷 가게의 전신 거울. 입혀 보면서 "이건 별로네, 저걸로"라고 바로 확인할 수 있다.

한 줄 예 —

# 대화창과 따로, 결과가 실제로 도는 미리보기 창
artifact.show(generated_webpage)  # 오른쪽에 페이지가 뜬다

커스터마이즈(customize)

한 문장 뜻 — AI가 만든 결과물을 대화로 조금씩 고쳐 내 입맛에 맞추는 것.

일상비유 — 미용실에서 자른 머리를 보고 "앞머리만 더 짧게"라고 추가로 다듬는 것.

한 줄 예 —

# 처음 결과를 받고, 말로 계속 고친다
ai.ask("구글 스타일로 디자인을 바꿔 줘")
ai.ask("할 일 목록도 추가해 줘")

5W1H(오더블유원에이치)

한 문장 뜻 — 왜·누가·무엇을·언제·어디서·어떻게, 이 여섯 질문으로 빠짐없이 정리하는 생각의 틀.

일상비유 — 친구에게 모임을 알릴 때 빠뜨리면 안 되는 항목들. 왜 모이는지, 누가 오는지, 뭘 하는지, 언제·어디서·어떻게.

한 줄 예 —

# 여섯 칸을 채우면 빠진 게 없다
plan = {"why": ..., "who": ..., "what": ..., "how": ...}

PRD(피알디, 제품 기획서)

한 문장 뜻 — 무엇을 왜 만들고 어떻게 구현할지 미리 정리해 둔 한 장짜리 설계 메모.

일상비유 — 집 짓기 전 그리는 설계도. 방이 몇 개고 어디에 둘지 정해 놓고 시작하면 헛삽질이 줄어든다.

한 줄 예 —

# AI에게 "이 PRD대로 만들어 줘"라고 넘긴다
ai.ask("이 기획서를 기반으로 HTML 구조를 짜 줘")

4단계 전략(뼈대 → 기능 → 디자인 → 점검)

한 문장 뜻 — 웹페이지 하나를 한 번에 안 만들고, 네 토막으로 쪼개 하나씩 시키고 확인하는 순서.

일상비유 — 집 지을 때 벽지부터 안 고른다. 설계도(뼈대) → 배관(기능) → 인테리어(디자인) → 준공 검사(점검) 순서다.

한 줄 예 —

# 한 줄로 다 안 시키고, 네 번 나눠 시킨다
build("뼈대"); build("기능"); build("디자인"); build("점검")

터미널(terminal)

한 문장 뜻 — 버튼 대신 명령어를 글로 쳐서 컴퓨터에게 직접 시키는 검은 창.

일상비유 — 직원에게 말로 일을 시키는 것. 메뉴판을 누르는 대신 "이거 해 줘"라고 또박또박 적어 건넨다.

한 줄 예 —

# 이런 명령어를 검은 창에 쳐서 시킨다
# > dir        (폴더 안 파일 목록 보기)
# > claude     (클로드 코드 실행하기)

Node.js(노드제이에스)

한 문장 뜻 — 자바스크립트로 만든 프로그램을 내 컴퓨터에서 돌게 해 주는 실행 바탕.

일상비유 — 차가 달리려면 깔려 있어야 하는 도로. 도로(Node.js)가 있어야 차(클로드 코드)가 달린다.

한 줄 예 —

# 클로드 코드가 이 위에서 돈다 (먼저 깔아야 함)
# nodejs.org/ko 에서 설치 프로그램 받아 설치

Git(깃)

한 문장 뜻 — 코드가 바뀐 내역을 차곡차곡 기록해 두는 버전 관리 도구.

일상비유 — 문서의 "이전 버전으로 되돌리기"를 무한히 해 주는 타임머신. 망쳐도 어제 상태로 돌아갈 수 있다.

한 줄 예 —

# 클로드 코드를 쓰기 전에 같이 깔아 두는 도구
# git-scm.com 에서 설치 프로그램 받아 설치

npm(엔피엠)

한 문장 뜻 — 필요한 프로그램(패키지)을 인터넷에서 받아 자동으로 깔아 주는 설치 도우미.

일상비유 — 앱스토어의 "설치" 버튼. 직접 찾아 옮길 필요 없이 이름만 대면 알아서 받아 깐다.

한 줄 예 —

# 이 한 줄로 클로드 코드를 깐다
# > npm install -g @anthropic-ai/claude-code
# -g 는 "컴퓨터 어디서나 쓰게" 라는 뜻

MNIST(엠니스트)

한 문장 뜻 — 0~9 손글씨 숫자 7만 장을 모아 둔, 입문용으로 가장 유명한 연습 데이터 묶음.

일상비유 — 운전 학원의 기능 시험 코스. 누구나 처음 연습할 때 쓰는 표준 코스라, 실력을 견줄 기준이 된다.

한 줄 예 —

# AI가 숫자 손글씨를 알아맞히도록 연습시키는 재료
# 각 그림은 28x28 픽셀 흑백, 1998년부터 표준

CLAUDE.md(클로드 닷 엠디)

한 문장 뜻 — 우리 프로젝트의 규칙·구조·명령어를 적어 두면, 클로드 코드가 켜질 때마다 알아서 읽는 메모 파일.

일상비유 — 새 직원에게 건네는 업무 인수인계 매뉴얼. 매번 말로 설명 안 해도, 이걸 읽고 바로 일한다.

한 줄 예 —

# 이 파일에 적은 규칙을 클로드 코드가 자동으로 따른다
# 예: "모든 파일은 영문 이름만 쓴다"

/init(슬래시 이닛)

한 문장 뜻 — 클로드 코드에게 현재 폴더를 살펴보고 CLAUDE.md 메모를 알아서 써 달라고 시키는 명령.

일상비유 — 새 사무실에 와서 "여기 어떻게 돌아가나 한 바퀴 둘러보고 정리해 줘"라고 부탁하는 것.

한 줄 예 —

# 클로드 코드 안에서 이걸 치면 CLAUDE.md가 생긴다
# /init

배치 파일(.bat)

한 문장 뜻 — 여러 명령어를 한 파일에 적어 두고, 더블 클릭 한 번으로 줄줄이 실행하는 파일.

일상비유 — 커피 머신의 "원터치" 버튼. 물 붓기·갈기·내리기를 한 번에 묶어 둬, 누르기만 하면 된다.

한 줄 예 —

# 더블 클릭만으로 프로그램이 켜진다
# run_program.bat  ← 이걸 클릭

localhost / 포트(port)

한 문장 뜻 — 내 컴퓨터에서 도는 프로그램에 내가 접속하는 주소가 localhost, 그 주소의 출입구 번호가 포트.

일상비유 — localhost는 "우리 집", 포트는 "현관·뒷문 같은 문 번호". 같은 집이라도 문(포트)이 달라야 안 부딪힌다.

한 줄 예 —

# localhost:8080 = 내 컴퓨터의 8080번 문으로 들어가기
# 브라우저 주소창에 localhost:8080 치면 내 프로그램이 뜬다

GUI vs CLI(지유아이 / 씨엘아이)

한 문장 뜻 — 아이콘·버튼을 눌러 쓰는 방식이 GUI, 글자 명령어를 쳐서 쓰는 방식이 CLI.

일상비유 — GUI는 사진 메뉴판을 손가락으로 찍는 키오스크, CLI는 점원에게 말로 주문하는 카운터. 둘 다 같은 커피를 시킨다.

한 줄 예 —

# GUI: 마우스로 [실행] 버튼 클릭
# CLI: 검은 창에 직접 타이핑 → claude

개념 척추

여기 7개는 책 전체를 관통하는 큰 줄기다.

각각 ①막히는 장면 ②일상비유 ③비유·코드·위험 표 ④한 문장 정의 순서다.

척추 1 — 바이브 코딩 = 말로 시키는 코딩

막히는 장면

"코딩을 배우려면 문법부터 몇 달은 외워야 하는 거 아니야?" 하고 지레 포기한 적 있죠?

그런데 요즘은 코드를 한 줄도 안 쓰고, AI에게 "이런 거 만들어 줘"라고 말만 해도 프로그램이 나온다.

그 새로운 방식이 바로 바이브 코딩이다.

일상비유

요리를 전혀 못 하는 사람이 요리사에게 "오늘 더우니까 시원한 파스타 해 줘"라고 말한다.

요리사가 알아서 만들어 오면, 맛보고 "좀 더 짜게"라고 고친다. 레시피·불 조절은 몰라도 된다.

한 문장 정의 — 바이브 코딩은 코드를 직접 타이핑하는 대신, AI와 대화하며 만들고·확인하고·고치는 새로운 개발 방식이다.

척추 2 — 프롬프트가 곧 실력

막히는 장면

AI에게 "멋진 홈페이지 만들어 줘"라고 했더니, 내 마음과 전혀 다른 게 나온 적 있죠?

AI가 잘못한 게 아니다. '멋지다'가 무슨 뜻인지 안 알려 줬을 뿐이다.

말을 구체적으로 바꾸면 결과가 확 달라진다. 그래서 프롬프트가 곧 실력이다.

일상비유

내비게이션에 "좋은 데로"라고 치면 못 간다. "서울역에서 강남역까지 가장 빠른 길"이라야 안내가 나온다.

AI도 행선지를 또렷이 대 줘야 제대로 데려다준다.

한 문장 정의 — 좋은 프롬프트는 명확성·구체성·맥락 세 가지를 갖추며, 같은 AI라도 프롬프트가 결과의 질을 좌우한다.

척추 3 — 한 번에 말고, 단계로 쪼개기

막히는 장면

"이 기획서대로 웹페이지 통째로 만들어 줘"라고 한 번에 시켰더니, 코드가 뒤죽박죽 섞여 어디를 고쳐야 할지 막막한 적 있죠?

큰 일을 한 덩어리로 시키면 확인도 수정도 어렵다.

작게 쪼개 하나씩 시키고 확인하면 훨씬 안전하다.

일상비유

집을 지을 때 벽지부터 고르지 않는다.

설계도(뼈대) → 배관·전기(기능) → 인테리어(디자인) → 준공 검사(점검) 순으로 한 단계씩 끝내고 넘어간다.

한 문장 정의 — 큰 작업은 뼈대 → 기능 → 디자인 → 점검처럼 작은 단계로 나눠, 각 단계마다 요청·생성·확인·수정을 반복하는 것이 안전하다.

척추 4 — 섹션에 이름표 붙이기

막히는 장면

웹페이지에서 "맨 위 메뉴만 색을 바꿔 줘"라고 했는데, AI가 페이지 전체를 다시 만들어 다른 데까지 바뀐 적 있죠?

어느 부분이 어디인지 이름이 없으면, AI도 정확히 짚어 고치기 어렵다.

각 구역에 이름표(ID)를 붙여 두면 그 부분만 콕 집어 고칠 수 있다.

일상비유

택배 상자마다 "주방용·욕실용" 이름표를 붙여 두는 것.

이름표가 있으면 "욕실 상자만 옮겨"가 되지만, 없으면 전부 다 뒤져야 한다.

한 문장 정의 — 화면을 구역으로 나눠 각각 고유한 이름(ID)을 붙이면, 전체를 다시 만들지 않고 원하는 부분만 정확히 수정할 수 있다.

척추 5 — 도구는 점점 깊어진다 (웹 → 내 컴퓨터)

막히는 장면

웹 채팅으로 만든 결과를 내 컴퓨터에 옮기려니, 코드를 복사해 붙이고 또 복사하느라 번거로운 적 있죠?

웹 채팅은 시작은 쉽지만, 내 컴퓨터의 파일을 직접 못 만진다.

더 깊이 가려면 도구를 내 컴퓨터에 깔아, AI가 파일을 직접 만들고 실행하게 한다.

일상비유

처음엔 빌려 타는 택시(웹 챗봇)로 충분하다.

자주 멀리 다니게 되면 내 차(내 컴퓨터에 깐 클로드 코드)를 산다. 내 짐(파일)을 직접 싣고 다닐 수 있다.

한 문장 정의 — AI 코딩 도구는 설치 없는 웹 챗봇에서 내 컴퓨터에 깔아 파일까지 다루는 전용 모델형으로 깊어지며, 이 책은 전용 모델형인 클로드 코드를 주로 다룬다.

척추 6 — CLAUDE.md = 프로젝트 인수인계 메모

막히는 장면

AI에게 매번 "우리 프로젝트는 영문 파일명만 써", "주석은 한글로 써"를 처음부터 다시 설명한 적 있죠?

세션이 끊기면 AI는 어제 한 약속을 기억하지 못한다.

그 규칙을 메모 파일 하나에 적어 두면, AI가 켤 때마다 알아서 읽고 따른다.

일상비유

새 직원이 올 때마다 말로 설명하면 지친다.

대신 "업무 매뉴얼" 한 부를 쥐여 주면, 읽고 알아서 일한다. 그 매뉴얼이 CLAUDE.md다.

한 문장 정의 — CLAUDE.md는 프로젝트의 규칙·구조·명령어를 적어 두는 메모 파일이며, 클로드 코드가 켜질 때마다 자동으로 읽어 세션이 끊겨도 맥락을 이어 준다.

척추 7 — 한글 이름은 사고를 부른다

막히는 장면

폴더 이름을 "내프로젝트"라고 한글로 지었더니, 프로그램이 알 수 없는 인코딩 오류로 멈춘 적 있죠?

컴퓨터 속 도구들은 영문·숫자 이름을 가정하고 만들어진 게 많다.

그래서 폴더·파일 이름엔 영문과 숫자만 쓰는 게 안전하다.

일상비유

해외 배송 송장에 한글 주소만 적으면 못 알아본다.

영문 주소로 적어야 어디서든 탈 없이 도착한다. 컴퓨터 경로도 마찬가지다.

한 문장 정의 — 폴더와 파일 이름에 한글이 들어가면 인코딩 오류가 날 수 있으므로, 경로에는 영문과 숫자만 쓰는 것이 안전한 기본 규칙이다.

한 걸음 더 ▸ (지금 몰라도 됨)

지금은 단순 규칙 하나면 충분하다. AI에게 시킬 땐 구체적으로, 한 번에 말고 작게 쪼개서.

"AI가 다 알아서 해 주니 확인은 안 해도 되지 않나?"는 아니다. 결과를 직접 보고 고치는 게 바이브 코딩의 절반이다. 이건 책을 따라가며 자연스레 몸에 밴다.

지금은 "구체적으로, 쪼개서, 확인하기" 규칙만 들고 가면 된다.

사이드박스 — 어디서 온 말일까 (흥미용)

'바이브 코딩(vibe coding)'은 2025년 안드레이 카파시(Andrej Karpathy)가 처음 꺼낸 말이다.

코드 문법을 따지기보다 "분위기(vibe)대로" AI에게 맡겨 만든다는 뜻이다. 외워 둘 필요는 없다.

부록 박스 — AI는 어떻게 여기까지 왔나 (참고용, 건너뛰어도 됨)

사람 뇌를 흉내 낸 작은 계산기(뉴럴넷, 1940년대)에서 출발했다.

이미지를 알아보는 눈(CNN), 그럴듯한 가짜를 그리는 화가(GAN), 문장 흐름을 읽는 독서가(RNN)를 거쳐, 중요한 단어에 집중하는 통역사(트랜스포머, 2017년 구글)가 나왔다.

그 위에서 오늘날의 LLM(클로드·ChatGPT)이 자랐다. 이 책에서 만지는 코드는 전부 사람 말로 시키고, 결과는 파이썬으로 본다.

다음 장 예고

다음 1장에서는 바이브 코딩이 정확히 무엇인지, 그리고 클로드로 첫 웹페이지를 직접 만들어 본다.

지금 0장 용어와 척추만 머리에 있으면 충분하다. 나머지는 1장에서 천천히 다룬다.